<template>
  <div class="home-container" :class="{'no-actionbar': hideActionBar}">
    <div v-show="!hideActionBar" class="actionbar elevation-1">
      <div class="left">
      </div>
      <div class="title">{{ title }}</div>
      <div class="right"></div>
    </div>

    <router-view class="home-router"/>

    <cube-tab-bar class="bottom-tab" v-model="selectedTab" @change="onTabChange">
      <cube-tab v-for="(item, index) in tabs" :label="item.label" :key="item.label">
        <!-- name为icon的插槽 -->
        <i slot="icon" :class="item.icon + ' fa-lg'"></i>
        <!-- 默认插槽 -->
        <div class="tab-title">{{item.label}}</div>
      </cube-tab>
    </cube-tab-bar>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import { RawLocation } from "vue-router";

@Component
export default class Home extends Vue {

  @Watch('$route', {
    deep: true
  })
  routeChange(newVal: any, oldVal: any) {
    // console.log(newVal);
    this.selectedTab = newVal.name;
  }

  private tab: number = 1;
  private title: string = "Amazon";

  private tabs: Array<any> = [
    {
      label: "Home",
      icon: "fa fa-home"
    },
    {
      label: "Missions",
      icon: "fa fa-calendar-check-o"
    },
    {
      label: "MyMissions",
      icon: "fa fa-list-alt"
    },
    {
      label: "Me",
      icon: "fa fa-user-circle-o"
    }
  ];

  private get hideActionBar() {
    let path = this.$route.name;
    return path !== 'MyMissions';
  }

  private selectedTab: string = 'Home';

  /**
   * 生命周期函数
   */
  protected mounted() {
    let route = this.$route;
    this.selectedTab = route.name || 'Home';
    this.title = this.selectedTab;
  }

  private onTabChange(value: string) {
    this.title = value;
    this.$router.push({
      name: value
    });
  }
}
</script>

<style lang="less" scoped>
@import url(../styles/variables.less);
@tab-height: 48px;
@actionbar-height: 36px;

.home-container {
  width: 100%;
  height: 100%;
  padding-top: @actionbar-height;
  &.no-actionbar {
    padding-top: 0;
  }
  .actionbar {
    height: @actionbar-height;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fcfcfc;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 999;
    .left,
    .right {
      align-items: center;
      justify-content: center;
      display: flex;
      width: 3rem;
      height: 100%;
      img {
        width: 1rem;
        height: 1rem;
      }
    }
    .title {
      font-size: 1.2rem;
    }
  }
  .home-router {
    width: 100%;
    height: calc(100% - @tab-height);
    padding-bottom: @tab-height;
    position: absolute;
    box-sizing: border-box;
    background-color: #f3f3f3;
  }
  .bottom-tab {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: @tab-height;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.3);
    background-color: rgb(250, 250, 250);
    .tab-title {
      font-size: 0.8rem;
      margin-top: 0.4rem;
    }
  }
}
</style>

